<script lang="ts" setup>
import { ref, toRefs, computed } from 'vue'
import { IFormData } from '../interface/IComponentItem'
import { Input } from 'ant-design-vue'

interface Props {
    formData?: IFormData
    testName: string
}
const props = defineProps<Props>()
const emits = defineEmits(['update:testName'])

const configRef = ref<InstanceType <typeof Input>>()
const { formData } = toRefs(props)
const formDataNew = computed(() => formData?.value)

const handleInput = (event: any) => {
    console.log(9999, event.target.value)
    if (!formData || !formData.value) return
    formData.value['pageName'] = event.target.value
    // TODO 这样修改报错
    // testName.value = event.target.value
    // TODO 这样修改正常
    emits('update:testName', event.target.value)
}
// const validate = () => {
//     if (configRef.value?.validate) {
//         configRef.value?.validate()
//     }
//     if (!this.rules) {
//         return true;
//     }
// }
</script>

<template>
    <div>
        <h4>Config</h4>
        <!-- <input placeholder="请输入名称" v-model="formDataNew?.pageName"/> -->
        <a-input ref="configRef" placeholder="请输入名称" :value="formDataNew?.pageName" @input="handleInput"></a-input>
    </div>
</template>